<HTML>
<HEAD><TITLE>Date Range Constraint Demo</TITLE>
</HEAD>
<BODY bgcolor="#dcdcdc">
<style type="text/css">
.plain {height:20px; vertical-align:middle;}
</style>


<BR>
An excellent example to show you how simple it is to use the dynamical date range constraint.<BR><BR>

<UL>NOTE:
<LI>You won't be able to start after the end-date or end before the start-date.
<LI>2 additional plugin functions are defined in plugins.js in order to support the range checking.
<LI>The input boxes are made readonly in this demo, by setting "readonly onfocus='this.blur()'".
<LI>If you don't want the start date to be constrained by the end date, simply replace the fStartPop call with fPopCalendar call.
e.g. if(self.gfPop)gfPop.fPopCalendar(document.demoform.dc1);
</UL>
<BR><BR>


<FORM name="demoform" onsubmit="alert('form submit');">
<table width=600>
<tr>
	<td>
Start Date: <input class="plain" name="dc1" value="" size="12" onfocus="this.blur()" readonly><a href="javascript:void(0)" onclick="if(self.gfPop)gfPop.fStartPop(document.demoform.dc1,document.demoform.dc2);return false;" HIDEFOCUS><img class="PopcalTrigger" align="absmiddle" src="calbtn.gif" width="34" height="22" border="0" alt=""></a>
	</td>
	<td>
End Date: <input class="plain" name="dc2" value="" size="12" onfocus="this.blur()" readonly><a href="javascript:void(0)" onclick="if(self.gfPop)gfPop.fEndPop(document.demoform.dc1,document.demoform.dc2);return false;" HIDEFOCUS><img class="PopcalTrigger" align="absmiddle" src="calbtn.gif" width="34" height="22" border="0" alt=""></a>
	</td>
</tr>
</table>
</FORM>




  <hr size="1">
  <div align="right"><font size=-2><em>Copyright&copy; 2003-2004 Idemfactor Solutions, 
    Inc. All rights reserved.</em></font></div>



<!--  PopCalendar(tag name and id must match) Tags should sit at the page bottom -->
<iframe width=132 height=142 name="gToday:contrast:agenda.js" id="gToday:contrast:agenda.js" src="ipopeng.htm" scrolling="no" frameborder="0" style="visibility:visible; z-index:999; position:absolute; left:-500px; top:0px;">
</iframe>
</BODY>
</HTML>

